<template>
  <div class="tell">
    <mine-title>联系小王</mine-title>
    <div class="my-message">
      <div>
        <img src="../../assets/img/20210127094312.jpg" alt="图片加载失败" />
      </div>
      <p><span class="myname">QQ：</span>849923370</p>
      <p><span class="myname">Email：</span>849923370@qq.com</p>
      <p>
        <span class="myname">csdn：</span
        ><a href="https://blog.csdn.net/qq_51075057?">
          <span class="a-href"> 前端爱好者小王</span></a
        >
      </p>
      <p>
        <span class="myname">Gitee：</span
        ><a href="https://gitee.com/wang-shuai-ming">
          <span class="a-href"> https://gitee.com/wang-shuai-ming</span></a
        >
      </p>
    </div>
    <div class="ba">©xiaowang | 豫ICP备2020036376号-1</div>
  </div>
</template>

<script>
import MineTitle from "../mine/Mine-title";

export default {
  name: "Mine-tell",
  components: {
    MineTitle,
  },
};
</script>

<style>
.tell {
  position: relative;
}
.tell .my-message {
  position: absolute;
  width: 50%;
  height: 300px;
  /* background-color: #000; */
  top: 200px;
  left: 50%;
  margin-left: -25%;
  text-align: center;
  font-size: 18px;
  line-height: 25px;
}
.tell .my-message img {
  width: 30%;
  margin-bottom: 60px;
}
.tell .my-message .myname {
  color: orange;
}
.tell .my-message .a-href {
  text-decoration: underline;
  color: #008feb;
}
.ba {
  width: 50%;
  height: 30px;
  position: absolute;
  top: 650px;
  left: 50%;
  margin-left: -25%;
  text-align: center;
  /* background-color: #000; */
}
</style>